<template>
    <div>
        <el-dialog v-model="props.dialogVisible" title="系统设置" width="600" @close="closeSystem" align-center>
            <el-form :model="props.data" label-width="130px" ref="systemRef" :rules="rules">
                <el-form-item label="结算金额：" prop="money">
                    <el-input-number v-model="props.data.money" placeholder="输入结算金额" :step="0.01" :min="0"
                        :precision="2"></el-input-number>
                </el-form-item>
                <el-form-item label="平台手机号：" prop="systemPhone">
                    <el-input v-model="props.data.systemPhone" placeholder="输入平台手机号"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeSystem">关闭</el-button>
                    <el-button type="primary" @click="submitSystem">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { setSystem } from '/@/api/api'
import { ElMessage } from 'element-plus';
const emits = defineEmits(['close'])
const props = defineProps({
    // 列表内容
    dialogVisible: {
        type: Boolean,
        default: () => false,
    },
    data: {
        type: Object,
        default: () => { },
    },
});
const systemRef = ref()
const rules = reactive({
    money: [
        { required: true, message: '请输入结算金额', trigger: 'blur' },
    ],
    systemPhone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            validator: function (rule, value, callback) {
                if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {
                    callback(new Error("请输入手机号"));
                } else {
                    //校验通过
                    callback();
                }
            },
            trigger: "blur"
        }
    ],
})
async function submitSystem() {
    systemRef.value.validate((valid, fields) => {
        if (valid) {
            const params = {
                ...props.data
            }
            setSystem(params).then((res: any) => {
                if (res.code == 200) {
                    ElMessage({
                        message: '修改成功！',
                        type: 'success',
                    });
                    closeSystem()
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
function closeSystem() {
    emits('close');
}
</script>
<style lang='scss' scoped></style>